import { defineComponent, reactive } from "vue";
import _ from "lodash";

export default defineComponent({
  props: {
    width: {
      default: "660px"
    },
    // 弹窗初始状态
    oriState: {
      type: Object,
    },
  },
  setup(props, { expose, slots }) {
    const state = reactive({
      show: false,
    })
    const _oriState = _.cloneDeep(props.oriState);
    const open = () => {
      state.show = true;
    }
    const close = () => {
      state.show = false;
      // 初始化弹窗状态池
      Object.entries(_oriState).forEach(item => {
        props.oriState && (props.oriState[item[0]] = _.cloneDeep(item[1]))
      })
    }
    expose({
      open, close
    })
    return () => (
      <a-modal v-model:visible={state.show} footer={null} style={{ width: props.width }}
      >
        {slots.default?.()}
      </a-modal>
    )
  }
})